import { Form, Input, Modal } from 'antd';

const { TextArea } = Input;

export default function UpdateInformationForm({ open, onCreate, onCancel, userCardInfor }) {


  const [form] = Form.useForm();

  const SpecialCharsValidator = (rule, value, callback) => {
    const regex = /[ `!#$%^&*()_+\-=\\[\]{};':"\\|,<> \\/?~]/
    if (regex.test(value)) {
      callback('输入不能包含特殊字符！');
    } else {
      callback();
    }
  };

  const PhoneNumber = async (rule, value)=>{
    const regex =  /^\d{1,10}$|^\d{12,}$/;
    if (regex.test(value)) {
      return Promise.reject("手机号长度不对")
    } else {
      return Promise.resolve()
    }
  }
  
  const values = [
    { name: "nickname", label: "昵称", check: {SpecialCharsValidator}, labelSpan:4,labelOffset: 0, wrapperCol: 10 },
    { name: "email", label: "邮箱", check: {SpecialCharsValidator}, labelSpan:4,labelOffset: 0, wrapperCol: 10 },
    { name: "motto", label: "座右铭", check: {SpecialCharsValidator},labelSpan:4, labelOffset: 0, wrapperCol: 10 },
    { name: "qq", label: "qq号码", check: {SpecialCharsValidator}, labelSpan:4,labelOffset: 0, wrapperCol: 10 },
    { name: "phone", label: "手机号", check: {SpecialCharsValidator,PhoneNumber}, labelSpan:4,labelOffset: 0, wrapperCol: 10 },
    { name: "hobby", label: "兴趣爱好", check: {SpecialCharsValidator}, labelSpan:4,labelOffset: 0, wrapperCol: 19, rows: 4 },
    { name: "personalProfile", label: "个人简介", check: {SpecialCharsValidator}, labelSpan:4,labelOffset: 0, wrapperCol: 19, rows: 4 },
  ]

  return (
    <Modal
      destroyOnClose
      open={open}
      okText="提交"
      cancelText="退出"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        preserve={false}
        size='small'
        form={form}
        layout="userInfor"
        name="userInfor"
        wrapperCol={{ span: 12, }}
        className="updata-user-infor"
      >
        {
          values.map((item) => {
            return (
              <Form.Item
                key={item.name}
                name={item.name}
                label={item.label}
                initialValue={userCardInfor?.[item.name]}
                rules={[
                  {
                    required: true,
                    message: `请输入${item.label}`,
                  },
                  { validator: item.check.SpecialCharsValidator },
                  { validator: item.check.PhoneNumber },
                ]}
                labelCol={{
                  span: item.labelSpan,
                  offset: item.labelOffset
                }}
                wrapperCol={{
                  span: item.wrapperCol
                }}  
              >
                { item.name === "hobby" || item.name === "personalProfile" ? <TextArea rows={item.rows} /> :<Input />}
              </Form.Item>
            )
          })
        }
      </Form>
    </Modal>
  );
}




